<template>
  <view class="order-page">
    <!-- 页面标题 -->
    <view class="order-header">
      <text class="order-header__title">确认订单</text>
    </view>
    
    <!-- 服务信息 -->
    <view class="order-service">
      <image :src="orderInfo.image" mode="aspectFill" class="order-service__image" />
      <view class="order-service__content">
        <view class="order-service__title">{{ orderInfo.title }}</view>
        <view class="order-service__option">{{ orderInfo.option }}</view>
        <view class="order-service__price">{{ orderInfo.price }}</view>
      </view>
    </view>
    
    <!-- 时间信息 -->
    <view class="order-item">
      <view class="order-item__label">服务时间</view>
      <view class="order-item__value">{{ orderInfo.time }}</view>
    </view>
    
    <!-- 地址信息 -->
    <view class="order-address" @click="selectAddress">
      <view v-if="selectedAddress" class="order-address__info">
        <view class="order-address__user">
          <text class="order-address__name">{{ selectedAddress.name }}</text>
          <text class="order-address__phone">{{ selectedAddress.phone }}</text>
        </view>
        <view class="order-address__detail">{{ selectedAddress.address }}</view>
      </view>
      <view v-else class="order-address__empty">
        <text>请选择服务地址</text>
      </view>
      <text class="order-address__arrow">></text>
    </view>
    
    <!-- 订单信息 -->
    <view class="order-form">
      <view class="order-form__item">
        <text class="order-form__label">服务备注</text>
        <input 
          class="order-form__input" 
          placeholder="请输入备注信息（选填）" 
          v-model="remark"
          maxlength="100"
        />
      </view>
      
      <view class="order-form__item">
        <text class="order-form__label">联系方式</text>
        <input 
          class="order-form__input" 
          placeholder="手机号码（选填，默认使用地址中的电话）" 
          v-model="contactPhone"
          maxlength="11"
          type="number"
        />
      </view>
    </view>
    
    <!-- 快递信息（代拿服务特有） -->
    <view v-if="orderInfo.categoryId === 1" class="order-express">
      <view class="order-section__title">快递信息</view>
      <view class="order-form__item">
        <text class="order-form__label">快递公司</text>
        <picker 
          :value="expressCompanyIndex" 
          :range="expressCompanies" 
          @change="handleExpressCompanyChange"
          class="order-form__picker"
        >
          <view class="uni-input">{{ expressCompanyIndex > -1 ? expressCompanies[expressCompanyIndex] : '请选择快递公司' }}</view>
        </picker>
      </view>
      
      <view class="order-form__item">
        <text class="order-form__label">取件码</text>
        <input 
          class="order-form__input" 
          placeholder="请输入快递取件码" 
          v-model="expressCode"
          maxlength="20"
        />
      </view>
      
      <view class="order-form__item">
        <text class="order-form__label">取件点</text>
        <picker 
          :value="pickupPointIndex" 
          :range="pickupPoints" 
          @change="handlePickupPointChange"
          class="order-form__picker"
        >
          <view class="uni-input">{{ pickupPointIndex > -1 ? pickupPoints[pickupPointIndex] : '请选择取件点' }}</view>
        </picker>
      </view>
    </view>
    
    <!-- 文件信息（打印服务特有） -->
    <view v-if="orderInfo.categoryId === 2" class="order-print">
      <view class="order-section__title">打印信息</view>
      <view class="order-form__item">
        <text class="order-form__label">打印类型</text>
        <picker 
          :value="printTypeIndex" 
          :range="printTypes" 
          @change="handlePrintTypeChange"
          class="order-form__picker"
        >
          <view class="uni-input">{{ printTypeIndex > -1 ? printTypes[printTypeIndex] : '请选择打印类型' }}</view>
        </picker>
      </view>
      
      <view class="order-form__item">
        <text class="order-form__label">份数</text>
        <input 
          class="order-form__input" 
          placeholder="请输入打印份数" 
          v-model="printCopies"
          maxlength="2"
          type="number"
        />
      </view>
      
      <view class="order-upload">
        <view class="order-upload__title">
          <text>上传文件</text>
          <text class="order-upload__count">{{ uploadFiles.length }}/5</text>
        </view>
        <view class="order-upload__files">
          <view 
            v-for="(file, index) in uploadFiles" 
            :key="index" 
            class="order-upload__file"
          >
            <text class="order-upload__file-name">{{ file.name }}</text>
            <text class="order-upload__file-size">{{ formatFileSize(file.size) }}</text>
            <text class="order-upload__file-delete" @click="deleteFile(index)">×</text>
          </view>
          <view 
            v-if="uploadFiles.length < 5" 
            class="order-upload__add"
            @click="uploadFile"
          >
            <text class="order-upload__add-icon">+</text>
            <text class="order-upload__add-text">上传文件</text>
          </view>
        </view>
      </view>
    </view>
    
    <!-- 价格详情 -->
    <view class="order-price">
      <view class="order-price__item">
        <text class="order-price__label">服务费用</text>
        <text class="order-price__value">¥{{ orderInfo.basePrice.toFixed(2) }}</text>
      </view>
      <view v-if="orderInfo.extraFee > 0" class="order-price__item">
        <text class="order-price__label">附加费用</text>
        <text class="order-price__value">¥{{ orderInfo.extraFee.toFixed(2) }}</text>
      </view>
      <view class="order-price__item">
        <text class="order-price__label">配送费</text>
        <text class="order-price__value">¥{{ orderInfo.deliveryFee.toFixed(2) }}</text>
      </view>
      <view class="order-price__item order-price__item--total">
        <text class="order-price__label">总计</text>
        <text class="order-price__total">¥{{ totalPrice.toFixed(2) }}</text>
      </view>
    </view>
    
    <!-- 底部操作栏 -->
    <view class="order-footer">
      <view class="order-footer__price">
        <text>实付款：</text>
        <text class="order-footer__total">¥{{ totalPrice.toFixed(2) }}</text>
      </view>
      <button class="order-footer__submit" @click="submitOrder">提交订单</button>
    </view>
  </view>
</template>

<script setup>
import { ref, reactive, computed, onMounted } from 'vue';

// 订单信息
const orderInfo = reactive({
  id: 1,
  title: '快递代拿服务',
  option: '小件 (0-2kg)',
  price: '¥3',
  basePrice: 3,
  extraFee: 0,
  deliveryFee: 2,
  image: 'https://picsum.photos/seed/service1/300/200',
  time: '今天 14:00-15:00',
  categoryId: 1
});

// 地址相关
const selectedAddress = ref(null);

// 表单信息
const remark = ref('');
const contactPhone = ref('');

// 代拿快递相关
const expressCompanies = ['顺丰速运', '中通快递', '圆通速递', '韵达快递', '申通快递', '京东物流', '邮政快递', '其他'];
const expressCompanyIndex = ref(-1);
const expressCode = ref('');
const pickupPoints = ['第一教学楼菜鸟驿站', '第二教学楼丰巢柜', '学生宿舍区快递站', '校门口快递超市', '图书馆旁驿站'];
const pickupPointIndex = ref(-1);

// 打印服务相关
const printTypes = ['黑白单面', '黑白双面', '彩色单面', '彩色双面'];
const printTypeIndex = ref(-1);
const printCopies = ref('1');
const uploadFiles = ref([]);

// 计算总价
const totalPrice = computed(() => {
  return orderInfo.basePrice + orderInfo.extraFee + orderInfo.deliveryFee;
});

// 页面加载
onMounted(() => {
  // 从缓存或API获取默认地址
  selectedAddress.value = {
    name: '张同学',
    phone: '13812345678',
    address: '大学城第三宿舍楼 5号楼 503室'
  };
  
  // 从上一页获取订单基本信息
  const page = getCurrentPages()[getCurrentPages().length - 1];
  const options = page.options;
  
  if (options && options.id) {
    // 实际项目中应该根据id从API获取服务详情
    console.log('订单页面加载，服务ID:', options.id);
  }
});

// 选择地址
const selectAddress = () => {
  uni.navigateTo({
    url: '/pages/me/address/index?select=true'
  });
};

// 选择快递公司
const handleExpressCompanyChange = (e) => {
  expressCompanyIndex.value = e.detail.value;
};

// 选择取件点
const handlePickupPointChange = (e) => {
  pickupPointIndex.value = e.detail.value;
};

// 选择打印类型
const handlePrintTypeChange = (e) => {
  printTypeIndex.value = e.detail.value;
};

// 上传文件
const uploadFile = () => {
  uni.chooseFile({
    count: 1,
    extension: ['.doc', '.docx', '.pdf', '.xls', '.xlsx', '.ppt', '.pptx', '.txt'],
    success: (res) => {
      const tempFiles = res.tempFiles;
      if (tempFiles.length > 0) {
        uploadFiles.value.push({
          name: tempFiles[0].name,
          size: tempFiles[0].size,
          path: tempFiles[0].path
        });
      }
    }
  });
};

// 删除文件
const deleteFile = (index) => {
  uploadFiles.value.splice(index, 1);
};

// 格式化文件大小
const formatFileSize = (size) => {
  if (size < 1024) {
    return size + 'B';
  } else if (size < 1024 * 1024) {
    return (size / 1024).toFixed(2) + 'KB';
  } else {
    return (size / (1024 * 1024)).toFixed(2) + 'MB';
  }
};

// 提交订单
const submitOrder = () => {
  // 表单验证
  if (!selectedAddress.value) {
    uni.showToast({
      title: '请选择服务地址',
      icon: 'none'
    });
    return;
  }
  
  // 代拿服务特有验证
  if (orderInfo.categoryId === 1) {
    if (expressCompanyIndex.value === -1) {
      uni.showToast({
        title: '请选择快递公司',
        icon: 'none'
      });
      return;
    }
    
    if (!expressCode.value) {
      uni.showToast({
        title: '请输入取件码',
        icon: 'none'
      });
      return;
    }
    
    if (pickupPointIndex.value === -1) {
      uni.showToast({
        title: '请选择取件点',
        icon: 'none'
      });
      return;
    }
  }
  
  // 打印服务特有验证
  if (orderInfo.categoryId === 2) {
    if (printTypeIndex.value === -1) {
      uni.showToast({
        title: '请选择打印类型',
        icon: 'none'
      });
      return;
    }
    
    if (!printCopies.value || parseInt(printCopies.value) < 1) {
      uni.showToast({
        title: '请输入正确的打印份数',
        icon: 'none'
      });
      return;
    }
    
    if (uploadFiles.value.length === 0) {
      uni.showToast({
        title: '请上传打印文件',
        icon: 'none'
      });
      return;
    }
  }
  
  // 提交订单
  // 实际项目中应该调用API提交订单
  uni.showLoading({
    title: '提交中...'
  });
  
  setTimeout(() => {
    uni.hideLoading();
    uni.showToast({
      title: '下单成功',
      icon: 'success'
    });
    
    // 模拟下单成功后跳转到订单详情页
    setTimeout(() => {
      uni.redirectTo({
        url: '/pages/service/order-detail?id=12345'
      });
    }, 1500);
  }, 2000);
};
</script>

<style lang="scss" scoped>
.order-page {
  min-height: 100vh;
  background-color: #f7f8fa;
  padding-bottom: 70px; // 为底部操作栏留出空间
}

.order-header {
  background-color: #07c160;
  padding: 15px;
  text-align: center;
  
  &__title {
    font-size: 18px;
    font-weight: bold;
    color: #ffffff;
  }
}

.order-service {
  display: flex;
  background-color: #ffffff;
  padding: 15px;
  margin-bottom: 10px;
  
  &__image {
    width: 80px;
    height: 80px;
    border-radius: 8px;
    margin-right: 12px;
  }
  
  &__content {
    flex: 1;
    display: flex;
    flex-direction: column;
  }
  
  &__title {
    font-size: 16px;
    font-weight: 500;
    color: #333;
    margin-bottom: 5px;
  }
  
  &__option {
    font-size: 14px;
    color: #666;
    margin-bottom: 10px;
  }
  
  &__price {
    font-size: 16px;
    font-weight: bold;
    color: #ff6b6b;
    margin-top: auto;
  }
}

.order-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #ffffff;
  padding: 15px;
  margin-bottom: 1px;
  
  &__label {
    font-size: 15px;
    color: #333;
  }
  
  &__value {
    font-size: 15px;
    color: #666;
  }
}

.order-address {
  display: flex;
  align-items: center;
  background-color: #ffffff;
  padding: 15px;
  margin-bottom: 10px;
  
  &__info {
    flex: 1;
  }
  
  &__user {
    display: flex;
    align-items: center;
    margin-bottom: 5px;
  }
  
  &__name {
    font-size: 16px;
    font-weight: 500;
    color: #333;
    margin-right: 10px;
  }
  
  &__phone {
    font-size: 14px;
    color: #666;
  }
  
  &__detail {
    font-size: 14px;
    color: #666;
    line-height: 1.4;
  }
  
  &__empty {
    flex: 1;
    font-size: 15px;
    color: #999;
  }
  
  &__arrow {
    font-size: 18px;
    color: #ccc;
    margin-left: 10px;
  }
}

.order-form {
  background-color: #ffffff;
  margin-bottom: 10px;
  
  &__item {
    display: flex;
    align-items: center;
    padding: 15px;
    border-bottom: 1px solid #f5f5f5;
    
    &:last-child {
      border-bottom: none;
    }
  }
  
  &__label {
    width: 80px;
    font-size: 15px;
    color: #333;
  }
  
  &__input, &__picker {
    flex: 1;
    height: 24px;
    font-size: 15px;
    color: #333;
  }
  
  &__input::placeholder {
    color: #999;
  }
}

.order-section__title {
  font-size: 16px;
  font-weight: bold;
  padding: 15px 15px 5px;
}

.order-express, .order-print {
  background-color: #ffffff;
  margin-bottom: 10px;
}

.order-upload {
  padding: 15px;
  
  &__title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    font-size: 15px;
    color: #333;
  }
  
  &__count {
    font-size: 14px;
    color: #999;
  }
  
  &__files {
    display: flex;
    flex-wrap: wrap;
  }
  
  &__file {
    width: calc(100% - 20px);
    margin: 5px 0;
    background-color: #f9f9f9;
    border-radius: 4px;
    padding: 10px;
    position: relative;
    
    &-name {
      font-size: 14px;
      color: #333;
      margin-bottom: 5px;
      display: block;
      padding-right: 25px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    
    &-size {
      font-size: 12px;
      color: #999;
    }
    
    &-delete {
      position: absolute;
      top: 10px;
      right: 10px;
      width: 20px;
      height: 20px;
      line-height: 20px;
      text-align: center;
      font-size: 18px;
      color: #999;
    }
  }
  
  &__add {
    width: 100px;
    height: 100px;
    background-color: #f9f9f9;
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 5px 0;
    
    &-icon {
      font-size: 24px;
      color: #999;
      margin-bottom: 5px;
    }
    
    &-text {
      font-size: 14px;
      color: #999;
    }
  }
}

.order-price {
  background-color: #ffffff;
  padding: 15px;
  margin-bottom: 10px;
  
  &__item {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    
    &:last-child {
      margin-bottom: 0;
    }
    
    &--total {
      border-top: 1px solid #f5f5f5;
      padding-top: 10px;
      margin-top: 5px;
    }
  }
  
  &__label {
    font-size: 15px;
    color: #666;
  }
  
  &__value {
    font-size: 15px;
    color: #333;
  }
  
  &__total {
    font-size: 18px;
    font-weight: bold;
    color: #ff6b6b;
  }
}

.order-footer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 60px;
  background-color: #ffffff;
  display: flex;
  align-items: center;
  padding: 0 15px;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
  
  &__price {
    flex: 1;
    font-size: 15px;
    color: #333;
  }
  
  &__total {
    font-size: 18px;
    font-weight: bold;
    color: #ff6b6b;
  }
  
  &__submit {
    width: 120px;
    height: 40px;
    background-color: #ff6b6b;
    color: #ffffff;
    font-size: 16px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
</style>
